<%--
  Created by IntelliJ IDEA.
  User: sicilin
  Date: 2017/9/22
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../commons-bootstrap.jsp"%>
<html>
<head>
    <title>用户管理界面</title>
    <style type="text/css">
        .rowSelect{
            background-color:#FFD6A0;
        }
        .dataTables_scrollHeadInner thead{
            background-color:#fff;
        }
        .dataTables_scrollHeadInner thead th{
            color:#337ab7;
        }
        body{
            padding-top:10px;
        }
        .rightPanel{
            width:300px;
            height:calc(100% - 30px);
            float:left;
        }
        .contentPanel{
            width:calc(100% - 310px);
            /*min-width:600px;*/
            height:calc(100% - 30px);
            float:left;
            margin-right:10px;
            background-color:#EDF4F2;
            padding:20px;
        }
        .cell{
            height:23px;
            overflow:hidden;
        }
        .cell .content{
            overflow:hidden;
            overflow-x:auto;
            height:40px;
            white-space:nowrap;
            font-size:14px;
        }
        .expendIcon{
            cursor:pointer;
            color:#d0d0d0;
        }
        .f-r{
            float:right;
        }
        .w-max{
            width:100%;
        }
        .w115{
            width:115px;
        }
        .w100{
            width:100px;
        }
        .w70{
            width:70px;
        }
        .w50{
            width:50px;
        }
        #userList td{
            padding:5px;
        }
        #userList{
            background-color:#fff;
            font-size:15px;
        }
        #userList tr:hover{
            background-color:#FFE6C6;
        }

    </style>

    <link rel="stylesheet" href="<%=basePath%>common/script/DataTables/media/css/dataTables.bootstrap.min.css"/>
    <script type="text/javascript" src="<%=basePath%>common/script/DataTables/media/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>common/script/DataTables/media/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript">
        var sexMapper = {0:'保密',1:'男',2:'女'};
        var statusMapper = {0:'禁用',1:'启用'};
        var columnFn = {
            createTime:function(row){
                return jsonTimeFormat(row.createTime);
            }
            ,updateTime:function(row){
                return jsonTimeFormat(row.updateTime);
            }
            ,company:function(row){
                return row.company.companyName+"("+row.company.companyCode+")";
            }
            ,sex:function(row){
                return sexMapper[row.sex];
            }
            ,status:function(row){
                return statusMapper[row.status] ;
            }
        };

        var rowFn={
            _lastSelected:null
            ,select:function(rowDom){
                if($(rowDom).hasClass('rowSelect')){
                    return;
                }
                $(rowDom).addClass('rowSelect');
                if(rowFn._lastSelected){
                    $(rowFn._lastSelected).removeClass('rowSelect');
                }
                rowFn._lastSelected = rowDom;
            }
            ,showUserRole:function(row){
                console.info(row);
            }
        };


        /* --- 分割线 --- */
        function jsonTimeFormat(jsonTime){
            return jsonTime.year+'-'+jsonTime.month+'-'+jsonTime.day+' '+jsonTime.hours+':'+jsonTime.minutes+':'+jsonTime.seconds;
        }

        function expandOrShrink(icon,columnName){
            if($(icon).hasClass('icon-horizontal-resize-op')){
                $('div[name='+columnName+']').removeClass('cell');
                $(icon).removeClass('icon-horizontal-resize-op');
                $(icon).addClass('icon-left-shrink f-r');
            }else{
                $('div[name='+columnName+']').addClass('cell');
                $(icon).removeClass('icon-left-shrink f-r');
                $(icon).addClass('icon-horizontal-resize-op');
            }
        }


        function JsonRequestForDataTable(opts){
            return function (request,callback,settings){
                var optTemp = $.extend({},opts);
                $.extend(optTemp.data,request);

                optTemp.data = JSON.stringify(optTemp.data);
                optTemp.success = function(data){
                    callback(data);
                };
                settings.jqXHR = $.ajax(optTemp);
            }
        }

        function initTable(){
            return $('#userList').dataTable({
                serverSide:true //是否开启服务端模式
                ,ajax:JsonRequestForDataTable({  //ajax请求
                    url:basePath+'userAction/searchUserLimit.json?requestType=DataTable'
                    ,dataType:'json'
                    ,contentType:'application/json'
                    ,type:'post'
                    ,data:{text:''}
                })
                ,dom: 'tfrlp'
//                ,buttons: [ 'copy', 'csv', 'excel' ]
                ,processing:true //是否显示处理状态
                ,paging:true //是否开启分页
                ,ordering:false //是否开启排序
                ,scrollX: true //是否开启横向滚动条
                ,scrollY:'calc(100% - 100px)'  //竖向滚动条
                ,scrollCollapse:false //当显示更少的记录时，是否允许表格减少高度
                ,rowId:'userId'
                ,columns:[
                    {name:'company',data:columnFn['company'],title:'所属公司  <i class="iconfont icon-horizontal-resize-op expendIcon" onclick="expandOrShrink(this,\'column-company\')" ></i>'}
                    ,{name:'account',data:'account',title:'账号  <i class="iconfont icon-horizontal-resize-op expendIcon" onclick="expandOrShrink(this,\'column-account\')" ></i>'}
                    ,{name:'name',data:'name',title:'名称  <i class="iconfont icon-horizontal-resize-op expendIcon" onclick="expandOrShrink(this,\'column-name\')" ></i>'}
                    ,{name:'telephone',data:'telephone',title:'手机号  <i class="iconfont icon-horizontal-resize-op expendIcon" onclick="expandOrShrink(this,\'column-telephone\')" ></i>'}
                    ,{name:'sex',data:columnFn['sex'],title:'性别'}
                    ,{name:'email',data:'email',title:'电子邮箱  <i class="iconfont icon-horizontal-resize-op expendIcon" onclick="expandOrShrink(this,\'column-email\')" ></i>'}
                    ,{name:'qq',data:'qq',title:'QQ'}
                    ,{name:'address',data:'address',title:'地址  <i class="iconfont icon-horizontal-resize-op expendIcon" onclick="expandOrShrink(this,\'column-address\')" ></i>'}
                    ,{name:'status',data:columnFn['status'],title:'状态 '}
                    ,{name:'createTime',data:columnFn['createTime'],title:'创建时间'}
                    ,{name:'updateTime',data:columnFn['updateTime'],title:'更新时间'}
                ]
                ,columnDefs: [
                    {width:'130px',targets:0,render: function(data, type, row, meta){
                        return '<div name="column-company" class="cell w-max"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'80px',targets:1,render: function(data, type, row, meta){
                        return '<div name="column-account" class="cell w-max"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'80px',targets:2,render: function(data, type, row, meta){
                        return '<div name="column-name" class="cell w-max"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'100px',targets:3,render: function(data, type, row, meta){
                        return '<div name="column-telephone" class="cell w100"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'50px',targets:4,render: function(data, type, row, meta){
                        return '<div name="column-sex" class="cell w50"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'70px',targets:5,render: function(data, type, row, meta){
                        return '<div name="column-email" class="cell w70"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'100px',targets:6,render: function(data, type, row, meta){
                        return '<div name="column-qq" class="cell w100"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'100px',targets:7,render: function(data, type, row, meta){
                        return '<div name="column-address" class="cell w-max"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'50px',targets:8,render: function(data, type, row, meta){
                        return '<div name="column-status" class="cell w50"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'115px',targets:9,render: function(data, type, row, meta){
                        return '<div name="column-createTime" class="cell w115"><p class="content">'+data+'</p></div>';
                    }}
                    ,{width:'115px',targets:10,render: function(data, type, row, meta){
                        return '<div name="column-updateTime" class="cell w115"><p class="content">'+data+'</p></div>';
                    }}
                ]
                ,language: {
                    lengthMenu: "每页 _MENU_ 条记录"
                    ,zeroRecords: "没有找到记录"
                    ,info: "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )"
                    ,infoEmpty: "无记录"
                    ,infoFiltered: "(从 _MAX_ 条记录过滤)"
                    ,paginate: {
                        previous: '‹',
                        next:     '›'
                    }
                    ,aria: {
                        paginate: {
                            previous: '上一页'
                            ,next:     '下一页'
                        }
                    }
                    ,loadingRecords: "请稍等 - 加载中..."
                    ,processing: "加载中...."
                    ,search:"搜索关键字："
                }
                ,rowCallback:function(row,data,index){
                    $(row).bind('click',function(){
                        rowFn.select(row);
                        rowFn.showUserRole(data);
                    });
                }
//                ,dom: '<"top"i>rt<"bottom"flp><"clear">'

            });
        }

        $(document).ready(function(){
            var table = initTable();
        });


    </script>
</head>
<body class="container-fluid">
    <div class="panel panel-info contentPanel">
        <div style="height:calc(100% - 20px);">
        <table id="userList" class="table table-bordered" cellspacing="0" width="100%" style="table-layout: fixed">
        </table>
        </div>
    </div>
    <div class="panel panel-warning rightPanel">

    </div>
</body>
</html>
